<template>
    <el-card shadow="never" class="border-0">
        <!-- 搜索 -->
        <Search :model="searchForm" @search="getData" @reset="resetSearchForm">
            <SearchItem label="关键词">
                <el-input v-model="searchForm.title" placeholder="商品标题" clearable></el-input>
            </SearchItem>
        </Search>
        <!-- 新增、刷新 -->
        <el-table :data="tableData" stripe style="width: 100%" v-loading="loading" default-expand-all>
            <el-table-column type="expand">
                <template #default="{ row }">
                    <div class="flex pl-18">
                        <el-avatar size="50" shape="circle" :src="row.user.avatar" fit="fill" class="mr-2"></el-avatar>
                        <div class="flex-1">
                            <h6 class="flex items-center">
                                {{ row.user.nickname || row.user.username }}
                                <small class="text-gray-400 ml-2">{{ row.review_time }}</small>
                                <el-button v-if="!row.textareaEdit && !row.extra" size="small" class="ml-auto"
                                    @click="openTextarea(row)">回复</el-button>
                            </h6>
                            {{ row.review.data }}
                            <div class="py-2">
                                <el-image v-for="(item, index) in row.review.image" :key="index" :src="item" fit="cover"
                                    :lazy="true" style="width: 100px;height: 100px;" class="rounded"></el-image>
                            </div>

                            <div v-if="row.textareaEdit">
                                <el-input v-model="textarea" placeholder="请输入评价内容" clearable :rows="2" class="w-[1000px]"
                                    type="textarea"></el-input>
                                <div class="py-2">
                                    <el-button type="primary" size="small" @click="review(row)" class="mr-2">回复</el-button>
                                    <el-button size="small"  @click="row.textareaEdit = false">取消</el-button>
                                </div>
                            </div>
                            <template v-else>
                                <div class="mt-3 bg-gray-200 p-3 rounded w-[1000px]" v-for="(item, index) in row.extra"
                                    :key="index">
                                    <h6 class="flex font-bold">客服 
                                        <el-button type="info" size="small" class="ml-auto" @click="openTextarea(row,item.data)">修改</el-button> </h6>
                                    <p>{{ item.data }}</p>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="ID" width="70" align="center" prop="id" />
            <el-table-column label="商品">
                <template #default="{ row }">
                    <div class="flex items-center ">
                        <el-image :src="row.goods_item ? row.goods_item.cover : ''" fit="fill" :lazy="true"
                            style="width: 50px;height: 50px;" class="rounded"></el-image>
                        <div class="ml-3">
                            <h6>{{ row.goods_item.title ? row.goods_item.title : '商品已经被删除' }}</h6>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="评价信息">
                <template #default="{ row }">
                    <div>
                        <p>用户：{{ row.user.nickname || row.user.username }}</p>
                        <p>
                            <el-rate v-model="row.rating" disabled show-score text-color="#ff9900" />
                        </p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="评价时间" align="center" prop="review_time"></el-table-column>
            <el-table-column label="状态">
                <template #default="{ row }">
                    <el-switch :modelValue="row.status" :active-value="1" :inactive-value="0"
                        @change="handleStatusChange($event, row)" :loading="row.statusLoading"
                        :disabled="row.super == 1">
                    </el-switch>
                </template>
            </el-table-column>
        </el-table>
        <div class="flex items-center justify-center mt-5">
            <el-pagination background layout="prev,pager, next" :total="total" :current-page="currentPage"
                :page-size="limit" @current-change="getData" />
        </div>
    </el-card>

</template>

<script setup>
import { computed, reactive, ref } from "vue"
import { getGoodsCommentList, upateGoodsCommentStatus, reviewGoodsComment } from "~/api/goods_comment.js"
import { toast } from "~/composables/util.js"
import ListHeader from "~/components/ListHeader.vue";
import { useInitTab } from "~/composables/useCommon";
import Search from "~/components/Search.vue"
import SearchItem from "~/components/SearchItem.vue"
const roles = ref([]);
const { searchForm, resetSearchForm, tableData, loading, currentPage, total, limit, getData, handleStatusChange } = useInitTab({
    searchForm: {
        title: ""
    },
    getList: getGoodsCommentList,
    onGetListSuccess: (res) => {
        tableData.value = res.list.map((o) => {
            o.statusLoading = false;
            o.textareaEdit = false
            return o;
        });
        total.value = res.totalCount;
        roles.value = res.roles;
    },
    updateStatus: upateGoodsCommentStatus
});

const textarea = ref();
const openTextarea = (row,data = "") => {
    textarea.value = data;
    row.textareaEdit = true;
}
const review = (row) =>{
    if(textarea.value == ""){
        return toast("回复内容不能为空！")
    }
    console.log(textarea.value);
    reviewGoodsComment(row.id,textarea.value)
        .then(res => {
            row.textareaEdit = false;
            toast("回复成功");
            getData();
        })
}
</script>

<style>

</style>